<template>
	<view>
		<view class="list">
			<view v-for="item in foodDetailList" :key="item.id">
				<navigator open-type="navigate" 
								:url="'/subpages/foodDetail/foodDetail?id=' + item.id + '&foodName=' + item.foodName + '&imgUrl=' + item.imgUrl">
				<view class="list-item">
					<u--image :src="item.imgUrl" shape="circle" :lazy-load="true" width="50" height="50"></u--image>
					<view class="list-item-right">
						<text class="title">{{item.foodName}}</text>
						<view class="">
							<text class="conetent">蛋白质：</text><text style="color: red;">{{item.protein}}</text><text
								class="conetent">克/100克</text>
						</view>

					</view>
				</view>
				</navigator>
			</view>
		</view>
	</view>
</template>

<script>
	import {
		foodDetailByTypeIdList
	} from '@/config/api.js'
	export default {
		data() {
			return {
				id: '',
				typeName: '',
				foodDetailList: []
			};
		},
		onLoad(option) {
			this.id = option.id;
			this.typeName = option.typeName;
			uni.setNavigationBarTitle({
				title: this.typeName
			})
			this.LoadFoodDetail(this.id);
		},
		methods: {
			// 根据二级分类id查询食物详情列表
			async LoadFoodDetail(typeId) {
				const data = await foodDetailByTypeIdList(typeId);
				console.log(data);
				if (data.code == 200) {
					this.foodDetailList = data.rows;
					console.log(this.foodDetailList);
				}
			},
		}
	}
</script>

<style lang="scss" scoped>
	.list {
		margin: 10rpx;

		.list-item {
			display: flex;
			flex-direction: row;
			align-items: center;
			margin: 30rpx 10rpx 30rpx 10rpx;

			.list-item-right {
				display: flex;
				flex-direction: column;
				margin-left: 20rpx;

				.title {
					font-size: 35rpx;
					font-weight: bold;
				}

				.conetent {
					color: #bcbfcb;
				}
			}
		}
	}
</style>
